<template>
	<view class="content">

		<view class="input-group">
			
			<image src="../../static/theme.png" mode="" class="logo"></image>
			<view class="input-row">

				<m-input class="m-input" type="text" clearable focus v-model="account" placeholder="请输入账号"></m-input>
			</view>
			<view class="input-row">

				<m-input type="password" displayable v-model="pwd" placeholder="请输入密码"></m-input>
				
			</view>
			<view class="action-row">
				<navigator url="../reg/reg">注册账号</navigator>

				<navigator url="../pwd/pwd">忘记密码</navigator>
			</view>
		</view>
		<view class="btn-row">
			<button type="primary" class="primary" @tap="bindLogin">登录</button>
		</view>


	</view>
</template>

<script>
	import data from '../../datas/data.json'
	import store from '../../globalStore/store.json'
	import mInput from '../component/m-input.vue'

	export default {
		components: {
			mInput
		},
		data() {
			return {
				account: '',
				pwd: '',
			}
		},
		onShow() {

		},
		methods: {
			bindLogin() {
				/**
				 * 客户端对账号信息进行一些必要的校验。
				 * 实际开发中，根据业务需要进行处理，这里仅做示例。
				 */
				// if (this.account.length < 5) {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '账号最短为 5 个字符'
				// 	});
				// 	return;
				// }
				// if (this.pwd.length < 6) {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '密码最短为 6 个字符'
				// 	});
				// 	return;
				// }
				/**
				 * 下面简单模拟下服务端的处理
				 * 检测用户账号密码是否在已注册的用户列表中
				 * 实际开发中，使用 uni.request 将账号信息发送至服务端，客户端在回调函数中获取结果信息。
				 */
				const msg = {
					user_name: this.account,
					password: this.pwd
				};
				let lists=data.users;
				let status=0;
				for(let i=0; i<data.users.length; i++){
					if(this.account==data.users[i].user_name){
						if(this.pwd==data.users[i].password){
							status=1;
							store.user=data.users[i];
							
							// store.user.user_name=lists[i].user_name;
							// store.user.user_id=lists[i].user_id;
							// store.user.icon=lists[i].icon;
							// store.user.frends=lists[i].focused_users[0]
							uni.reLaunch({
								url: '../disconver/disconver',
							});
							break;							
						}else{
							uni.showToast({
								icon: 'none',
								title: '密码错误'
							});							
						}

					}
				}
				if(status==0){
					uni.showToast({
						icon: 'none',
						title: '该账号不存在',
						duration: 1500
					});
					
				}
			},
			
			toMain(user) {
				this.globalLogin(user);

				uni.reLaunch({
					url: '../disconver/disconver',
				});

			}
		},

	}
</script>

<style scoped>
	@import "../component/m-icon/m-icon.css";
	/*每个页面公共css */
	page {
		min-height: 100%;
		display: flex;
		font-size: 16px;
	}

	/* #ifdef MP-BAIDU */
	page {
		width: 100%;
		height: 100%;
		display: block;
	}

	swan-template {
		width: 100%;
		min-height: 100%;
		display: flex;
	}

	/* 原生组件模式下需要注意组件外部样式 */
	custom-component {
		width: 100%;
		min-height: 100%;
		display: flex;
	}

	/* #endif */

	/* #ifdef MP-ALIPAY */
	page {
		min-height: 100vh;
	}

	/* #endif */

	/* 原生组件模式下需要注意组件外部样式 */
	m-input {
		width: 100%;
		/* min-height: 100%; */
		display: flex;
		flex: 1;
	}

	.content {
		display: flex;
		flex: 1;
		flex-direction: column;
		background-color: #f9f9f9;
		padding: 10px;
	}

	.input-group {

		margin-top: 20px;
		position: relative;
	}

	/* .input-group::before {
		position: absolute;
		right: 0;
		top: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}

	.input-group::after {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	} */

	.input-row {
		box-shadow: #ebedf2 0px 15px 33px;
		display: flex;
		background: #FFFFFF;
		height: 50px;
		flex-direction: row;
		position: relative;
		font-size: 18px;
		line-height: 40px;
		border-radius: 20px 20px;
	}
	.input-row:not(:first-child){
		margin-top:6%;
	}
	.input-row .title {
		width: 72px;
		padding-left: 15px;
	}

	.input-row.border::after {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 8px;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}

	.btn-row {
		margin-top: 25px;
		padding: 10px;
	}

	button.primary {
		background: linear-gradient(#2b7ffc, #4c9cfd);
		font-size: 20px;
		border-radius: 20px;
	}

	.logo{
		margin-left: 38%;
		margin-top:11%;
		margin-bottom: 3%;
		width: 90px;
		height:70px;
	}
	.action-row {
		display: flex;
		flex-direction: row;
		justify-content: center;
		
		margin-top: 7%;
	}
	.forget{
		margin-top: 7%;
	}
	.forget-nav{
		margin-left: 70%;
	}
	.top-nav{
		width: 107%;
		height: 40px;
		margin-left: -3%;
		margin-top: -3%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		background: #FFFFFF;
	}
	.top-nav navigator {
		color: #2478fc;
		font-size: 20px;
		padding: 0 10px;
	}
	.action-row navigator {
		color: #007aff;
		padding: 0 10px;
	}

	.oauth-row {
		display: flex;
		flex-direction: row;
		justify-content: center;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}

	.oauth-image {
		position: relative;
		width: 50px;
		height: 50px;
		border: 1px solid #dddddd;
		border-radius: 50px;
		margin: 0 20px;
		background-color: #ffffff;
	}

	.oauth-image image {
		width: 30px;
		height: 30px;
		margin: 10px;
	}

	.oauth-image button {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
	}
</style>
